<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bootstrap-table.min.css" />
<style type="text/css">
	.alert {
			z-index:1060;
	        position: fixed;
		    top: -50px;
		    width: 100%; 
	}

</style>
</head>
<body>

	<div class="container">
		<div class="row">
			<h3>添加路由配置</h3>
		</div>
		<div class="row">
			<form id="qudaoform">
				<div class="form-row">
					<div class="form-group col-md-3">
						<label for="shanghu">商户</label> 
						<select id="shanghu"  name = "shanghuid" class="form-control" required="required">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="qudao">渠道</label> 
						<select id="qudao"  name = "qudaoid"  class="form-control" required="required">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="yinhang">银行</label> 
						<select id="yinhang"  name = "yinhangid"   class="form-control" required="required">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="qishu">期数</label> 
						<select id="qishu"  name = "qishuid"   class="form-control" required="required">
						</select>
					</div>
				</div>
				<div class="form-row">
					<div class="form-group col-md-2">
						<label for="maxamount">上限金额</label> <input type="number"
							class="form-control"  name = "maxamount"   id="maxamount"  placeholder="单位：元" required="required">
					</div>
					<div class="form-group col-md-2">
						<label for="minamount">下限金额</label> <input type="number"
							class="form-control"   name = "minamount"  id="minamount" placeholder="单位：元" required="required">
					</div>
					<div class="form-group col-md-2">
						<label for="feilv">费率</label> <input type="number"
							class="form-control"  name = "feilv"   id="feilv" placeholder="单位：%" required="required">
					</div>
					<div class="form-group col-md-2">
						<label for="submit">操作</label> <br>
						<div class="btn-group">
					          <button type="button" id="addQudaoluyou" class="btn btn-primary">添加</button>
							  <button type="button" id="selectQudaoluyou" class="btn btn-primary">刷新</button>
					     </div>
					</div>
				</div>
			</form>
		</div>

		<div class="row">
			<h3>路由配置列表</h3>
		</div>
		<div class="row">
				<table id="qudaoluyoutable"></table>
		</div>
		<div class="row">
			<h3>测试路由</h3>
		</div>
		<div class="row">
				<form id="query_qudaoform">
				<div class="form-row">
					<div class="form-group col-md-3">
						<label for="query_shanghu">商户</label> 
						<select id="query_shanghu"  name = "shanghuid" class="form-control" required="required">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="query_qudao">渠道</label> 
						<select id="query_qudao"  name = "qudaoid"  class="form-control" >
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="query_yinhang">银行</label> 
						<select id="query_yinhang"  name = "yinhangid"   class="form-control">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="query_qishu">期数</label> 
						<select id="query_qishu"  name = "qishuid"   class="form-control">
						</select>
					</div>
					<div class="form-group col-md-2">
						<label for="query_amount">金额</label> <input type="number"
							class="form-control"  name = "amount"   id="query_amount"  placeholder="单位：元" >
					</div>
					<div class="form-group col-md-2">
						<label for="submit">操作</label> <br>
						<button type="button" id="query_Qudaoluyou" class="btn btn-primary">查询</button>
					</div>
				</div>
			</form>
		</div>
		<div class="row">
				<table id="query_qudaoluyoutable"></table>
		</div>
		<div class="row">
				<div style="padding: 25px 0;"></div>
		</div>
	</div>



	<div class="modal fade" id="qudaoluyouEditModal" tabindex="-1" >
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">编辑配置</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <form id="qudaoluyouEditForm">
				<div class="form-row">
					<div class="form-group col-md-3">
						<label for="edit_shanghu">商户</label> 
						<select id="edit_shanghu"  name = "shanghuid" class="form-control" required="required">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="edit_qudao">渠道</label> 
						<select id="edit_qudao"  name = "qudaoid"  class="form-control" required="required">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="edit_yinhang">银行</label> 
						<select id="edit_yinhang"  name = "yinhangid"   class="form-control" required="required">
						</select>
					</div>
					<div class="form-group col-md-3">
						<label for="edit_qishu">期数</label> 
						<select id="edit_qishu"  name = "qishuid"   class="form-control" required="required">
						</select>
					</div>
				</div>
				<div class="form-row">
					<div class="form-group col-md-3">
						<label for="edit_maxamount">上限金额</label> <input type="number"
							class="form-control"  name = "maxamount"   id="edit_maxamount"  placeholder="单位：元" required="required">
					</div>
					<div class="form-group col-md-3">
						<label for="edit_minamount">下限金额</label> <input type="number"
							class="form-control"   name = "minamount"  id="edit_minamount" placeholder="单位：元" required="required">
					</div>
					<div class="form-group col-md-3">
						<label for="edit_feilv">费率</label> <input type="number"
							class="form-control"  name = "feilv"   id="edit_feilv" placeholder="单位：%" required="required">
					</div>
	       			<input type="text" hidden id = "qudaoluyouEditId" name="id" required="required">
				</div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id= "qudaoluyouEditBtn">更新</button>
	        <button type="reset" class="btn btn-primary" hidden id= "qudaoluyouEditResetBtn">重置</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<div class="modal fade" id="qudaoluyouDeleteModal" tabindex="-1" >
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">注意</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        是否删除配置?
	        <input type="text" hidden id = "qudaoluyouDeteletId">
	      </div>
	      <div class="modal-footer">
	      
	        <button type="button" class="btn btn-secondary" data-dismiss="modal" id = "qudaoluyouDeteletCloseBtn">关闭</button>
	        <button type="button" class="btn btn-primary"  id = "qudaoluyouDeteletBtn" >删除</button>
	      </div>
	    </div>
	  </div>
	</div>

	<script src="/js/jquery-3.3.1.min.js"></script>
	<script src="/js/popper.min.js" /></script>
	<script src="/js/bootstrap.min.js" /></script>
	<script src="/js/bootstrap-table.min.js" /></script>
	<script src="/js/bootstrap-table-zh-CN.min.js" /></script>
	<script>
	Date.prototype.format=function(t){var e=t;e=(e=e.replace(/yyyy|YYYY/,this.getFullYear())).replace(/yy|YY/,this.getYear()%100>9?(this.getYear()%100).toString():"0"+this.getYear()%100);var s=this.getMonth()+1;return e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=e.replace(/MM/,s>9?s.toString():"0"+s)).replace(/M/g,s)).replace(/w|W/g,["日","一","二","三","四","五","六"][this.getDay()])).replace(/dd|DD/,this.getDate()>9?this.getDate().toString():"0"+this.getDate())).replace(/d|D/g,this.getDate())).replace(/hh|HH/,this.getHours()>9?this.getHours().toString():"0"+this.getHours())).replace(/h|H/g,this.getHours())).replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():"0"+this.getMinutes())).replace(/m/g,this.getMinutes())).replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():"0"+this.getSeconds())).replace(/s|S/g,this.getSeconds())};
	$(function() {
			 init();
			 
			 //测试
			 $('#query_Qudaoluyou').on('click',function(){
				 $("#query_qudaoluyoutable").bootstrapTable('refresh');
			 })
			 
			 
			 //添加
			 $('#addQudaoluyou').on('click',function(){
				 
				 if(!$('#shanghu').val()){
					 var resp = {
							 msg : "商户不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#qudao').val()){
					 var resp = {
							 msg : "渠道不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#yinhang').val()){
					 var resp = {
							 msg : "银行不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#qishu').val()){
					 var resp = {
							 msg : "期数不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#maxamount').val()){
					 var resp = {
							 msg : "上限金额不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#minamount').val()){
					 var resp = {
							 msg : "下限金额不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#feilv').val()){
					 var resp = {
							 msg : "费率不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 
				 if(parseFloat($('#minamount').val()) > parseFloat($('#maxamount').val())){
					 var resp = {
							 msg : "下限金额不能大于上限金额",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 
				 $.post('/qdpz/add',$('#qudaoform').serialize(),function(resp){
					 alert(resp)
					 loadQudaoluyou();
				 })
			 })
			 
			  $('#selectQudaoluyou').on('click',function(){
				  loadQudaoluyou()
			  });
			 //删除
			  $('#qudaoluyoutable').on('click','.delete',function(){
				  var _this = $(this);
				  var id = _this.data('id')
				  $('#qudaoluyouDeteletId').val(id)
				  $('#qudaoluyouDeleteModal').modal('toggle');
			 })
			 
			 $('#qudaoluyouDeteletBtn').on('click',function(){
				 $.post('/qdpz/delete',{id:$('#qudaoluyouDeteletId').val()},function(resp){
					 alert(resp)
					 $('#qudaoluyouDeleteModal').modal('toggle');
					 loadQudaoluyou();
				 })
			 })
			 $('#qudaoluyouDeleteModal').on('hidden.bs.modal', function (e) {
				 $('#qudaoluyouDeleteId').val('')
			})
			 
			 
			 //编辑
			  $('#qudaoluyoutable').on('click','.edit',function(){
				  var _this = $(this);
				  var id = _this.data('id')
				 $.post('/qdpz/luyou',{id:id},function(resp){
					 alert(resp,true)
					 	        
					 $('#edit_shanghu').val(resp.data.shanghuid)
					 $('#edit_qudao').val(resp.data.qudaoid)
					 $('#edit_shanghu').val(resp.data.shanghuid)
					 $('#edit_yinhang').val(resp.data.yinhangid)
					 $('#edit_qishu').val(resp.data.qishuid)
					 $('#edit_maxamount').val(resp.data.maxamount)
					 $('#edit_minamount').val(resp.data.minamount)
					 $('#edit_feilv').val(resp.data.feilv)
					 $('#qudaoluyouEditId').val(resp.data.id)
							 
					 $('#qudaoluyouEditModal').modal('toggle');
				 })
			 })
			 
			 $('#qudaoluyouEditBtn').on('click',function(){
				 
				 if(!$('#edit_shanghu').val()){
					 var resp = {
							 msg : "商户不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#edit_qudao').val()){
					 var resp = {
							 msg : "渠道不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#edit_yinhang').val()){
					 var resp = {
							 msg : "银行不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#edit_qishu').val()){
					 var resp = {
							 msg : "期数不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#edit_maxamount').val()){
					 var resp = {
							 msg : "上限金额不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#edit_minamount').val()){
					 var resp = {
							 msg : "下限金额不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#edit_feilv').val()){
					 var resp = {
							 msg : "费率不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 if(!$('#qudaoluyouEditId').val()){
					 var resp = {
							 msg : "主键不能为空",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 
				 if(parseFloat($('#edit_minamount').val()) > parseFloat($('#edit_maxamount').val())){
					 var resp = {
							 msg : "下限金额不能大于上限金额",
							 code : '000001'
					 }
					 alert(resp)
					 return false;
				 }
				 
				 $.post('/qdpz/add',$('#qudaoluyouEditForm').serialize(),function(resp){
					 alert(resp)
					 if(resp.code == '000000'){
						 $('#qudaoluyouEditModal').modal('toggle');
						 loadQudaoluyou();
					 }
				 })
			 })
			 $('#qudaoluyouEditModal').on('hidden.bs.modal', function (e) {
				 $('#qudaoluyouEditResetBtn').trigger('click');
				 $('#qudaoluyouEditId').val('')
			})
			 
			 
			function init(){
				loadQudaoluyou();
				loadShanghu();
				loadQudao();
				loadYinhang();
				loadQishu();
			}
			
			function loadQudaoluyou(){

			 $("#qudaoluyoutable").bootstrapTable('refresh');
					
			}
			
			
			
			function loadShanghu(){
				$.get("/qdpz/shanghu/list", function(resp){
					alert(resp,true)
					
					var data = resp.data;
					var select = $('#shanghu');
					var edit_select = $('#edit_shanghu');
					var query_select = $('#query_shanghu');
					query_select.append('<option value="">全部</option>')
					for(var i = 0; i < data.length;i ++){
						var option = '<option value="'+data[i].id+'">'+data[i].name+'</option>';
						select.append(option);
						edit_select.append(option);
						query_select.append(option);
					}
				});
			}
			
			function loadQudao(){
				$.get("/qdpz/qudao/list", function(resp){
					alert(resp,true)
					
					var data = resp.data;
					var select = $('#qudao');
					var edit_select = $('#edit_qudao');
					var query_select = $('#query_qudao');
					query_select.append('<option value="">全部</option>')
					for(var i = 0; i < data.length;i ++){
						var option = '<option value="'+data[i].id+'">'+data[i].name+'</option>';
						select.append(option);
						edit_select.append(option);
						query_select.append(option);
					}
				});
			}
			
			function loadYinhang(){
				$.get("/qdpz/yinhang/list", function(resp){
					alert(resp,true)
					
					var data = resp.data;
					var select = $('#yinhang');
					var edit_select = $('#edit_yinhang');
					var query_select = $('#query_yinhang');
					query_select.append('<option value="">全部</option>')
					for(var i = 0; i < data.length;i ++){
						var option = '<option value="'+data[i].id+'">'+data[i].name+'</option>';
						select.append(option);
						edit_select.append(option);
						query_select.append(option);
					}
				});
			}
			function loadQishu(){
				$.get("/qdpz/qishu/list", function(resp){
					alert(resp,true)
					
					var data = resp.data;
					var select = $('#qishu');
					var edit_select = $('#edit_qishu');
					var query_select = $('#query_qishu');
					query_select.append('<option value="">全部</option>')
					for(var i = 0; i < data.length;i ++){
						var option = '<option value="'+data[i].id+'">'+data[i].name+'</option>';
						select.append(option);
						edit_select.append(option);
						query_select.append(option);
					}
				});
			}
			
			
		   var i = 0;
			$('#query_qudaoluyoutable').bootstrapTable({
				url: '/qdpz/rate',
				contentType:'application/x-www-form-urlencoded;charset=utf-8',
				queryParams:function(params) {
					return $('#query_qudaoform').serialize();
				},
			    responseHandler:function(res) {
			    	if(i == 0){
			    		i = 1;
			    	}else{
			    		alert(res,true)
			    	}
			    	if(res.data && res.data.list.length > 0){
			    		for(var j = 0; j < res.data.list.length ; j ++){
			    			if(res.data.list[j].id == res.data.qudaoluyouDto.id){
			    				res.data.list[j].checked = true;
			    				break;
			    			}
				    	}
			    	}
			    	
			    	return (res.data && res.data.list)||[];
			    },
			    uniqueId: "id",					//每一行的唯一标识，一般为主键列
			    method: 'post', //请求方式（*）
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                rowStyle : function(row,index) {
                	var rowColor = ['active', 'success,table-primary', 'info', 'warning', 'danger'];
					if(row.checked){
			            return {
			                classes: 'table-primary'
			            }
			        }else{
			        	return {
			                classes: 'table-default'
			            }
			        }
				},
			    columns: [{
			        title: '序号',
			        formatter: function (value, row, index) {
			        			return index+1;
			        }
			    }, {
			        field: 'shanghuName',
			        sortable:true,
			        title: '商户'
			    }, {
			        field: 'qudaoName',
			        sortable:true,
			        title: '渠道'
			    },
			    {
			        field: 'yinhangName',
			        sortable:true,
			        title: '银行'
			    },
			    {
			        field: 'yinhangCode',
			        sortable:true,
			        title: '银行编号'
			    },{
			        field: 'qishuName',
			        sortable:true,
			        order:'asc',
			        sorter:function(a,b,rowA,rowB){
			        	return rowA.qishu - rowB.qishu;
			        },
			        title: '期数'
			    }, {
			        field: 'feilv',
			        sortable:true,
			        title: '费率'
			    },  {
			        field: 'feilvamaxmount',
			        sortable:true,
			        title: '付息金额上限'
			    }, {
			        field: 'maxamount',
			        sortable:true,
			        title: '金额上限'
			    }, {
			        field: 'minamount',
			        sortable:true,
			        title: '金额下限'
			    },  {
			        field: 'createTime',
			        sortable:true,
			        title: '创建时间',
			        formatter: function (value, row, index) {
						return new Date(value).format('yyyy-MM-dd HH:mm:ss');
					}
			    }
			    
			    ]
			});
			
			
			
			
			
			
			
			
			
			
			$('#qudaoluyoutable').bootstrapTable({
				url: '/qdpz/qudaoluyou/list',
				contentType:'application/x-www-form-urlencoded;charset=utf-8',
			    responseHandler:function(res) {
			    	return res.data||[];
			    },
			    method: 'post', //请求方式（*）
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
			    columns: [{
			        title: '序号',
			        formatter: function (value, row, index) {
							return index+1;
						}
			    }, {
			        field: 'shanghuName',
			        sortable:true,
			        title: '商户'
			    }, {
			        field: 'qudaoName',
			        sortable:true,
			        title: '渠道'
			    },
			    {
			        field: 'yinhangName',
			        sortable:true,
			        title: '银行'
			    },
			    {
			        field: 'yinhangCode',
			        sortable:true,
			        title: '银行编号'
			    },{
			        field: 'qishuName',
			        sortable:true,
			        order:'asc',
			        sorter:function(a,b,rowA,rowB){
			        	return rowA.qishu - rowB.qishu;
			        },
			        title: '期数'
			    }, {
			        field: 'feilv',
			        sortable:true,
			        title: '费率'
			    }, {
			        field: 'feilvamaxmount',
			        sortable:true,
			        title: '付息金额上限'
			    }, {
			        field: 'maxamount',
			        sortable:true,
			        title: '金额上限'
			    }, {
			        field: 'minamount',
			        sortable:true,
			        title: '金额下限'
			    },  {
			        field: 'createTime',
			        sortable:true,
			        title: '创建时间',
			        formatter: function (value, row, index) {
						return new Date(value).format('yyyy-MM-dd HH:mm:ss');
					}
			    }, {
			    	field: 'id',
			        title: '操作',
			        formatter: function (value, row, index) {
			        	var html = '<div class="btn-group">'+
					            '<button type="button" class="edit btn btn-primary" data-id="'+value+'">编辑</button>'+
					           '<button type="button" class="delete btn btn-danger" data-id="'+value+'">删除</button>'+
					          '</div>'
							return html;
						}
			    }
			    
			    ]
			});
			
			
			
			
			//提示框
			function alert(resp,noTips){
				 var msg ,b;
				 if(resp && resp.code  && resp.code == '000000'){
					 if(noTips){
						 return false;
					 }
					 b = true;
				 }else{
					 b = false;
				 }
				 
				 msg = resp.msg;
				 var time = new Date().getTime() +'-'+ Math.round(Math.random()*1000);
				 var className = 'alert-'+time;
				 var alertHtml = '<div class="alert '+className+'">'+
												            '<button type="button" class="close" data-dismiss="alert">×</button>'+
												            msg+
		   											 '</div>';
					 
				 $('body').append(alertHtml);
				 
				 var alert = $('body>.'+className);
				 if(b){
					 alert.addClass('alert-success')
				 }else{
					 alert.addClass('alert-danger')
				 }
				 
				alert.animate({ 
					 top: '0px'
				},300,function(){
					setTimeout(function(){
						alert.animate({ 
							 top: '-50px'
						},300,function(){
							alert.remove();
						})
	 				 },2500) 
				})

					 
			 }
		})
	</script>
</body>
</html>